<template>
  <div class="anime-day">
    <div class="day">
        <el-image :src="require(`@/assets/Class/${day.logo}.png`)" fit="contain" @click="show = !show"></el-image>
        <h4>{{day.name}}</h4>
    </div>
    <transition name="el-zoom-in-center">
        <div class="anime-cards" v-show="show">
            <div class="anime-card" v-for="(anime,index) in day.animes" :key="index">
                <a :href="`https://omofun.tv/vod/detail/id/${anime.id}.html`" target="_blank">
                    <el-image :src="require(`@/assets/Anime/${anime.url}.png`)" fit="cover"></el-image>
                </a>
                <p class="info">{{anime.title}}</p>
            </div>
        </div>
    </transition>
    <transition name="el-zoom-in-center">
        <el-image class="seven" v-show="!show" :src="require(`@/assets/Class/${day.backgroud}.png`)"></el-image>
    </transition> 
  </div>
  <el-divider />
</template>

<script>
import { ref } from '@vue/reactivity'

export default {
    name: 'AnimeDay',
    props: ['day'],
    setup() {
        let show = ref(true)
        
        return {
            show
        }
    }
}
</script>

<style scoped>
    .anime-day {
        position: relative;
        display: flex;
        align-items: center;
        height: 350px;
    }
    .day {
        width: 100px;
        text-align: center;
    }
    .anime-cards {
        display: flex;
    }
    .anime-card {
        width: 200px;
        margin: 0 10px;
    }
    .info {
        height: 50px;
        padding: 0 10px;
        text-align: center;
        font-size: 14px;
        /* 可以使用\n进行换行 */
        white-space: pre-wrap;
    }
    .seven {
        position: absolute;
        top: 0;
        left: 100px;
    }
</style>